<!DOCTYPE html>
<html lang="en">
<head>
 <!-- 
 Title: Case Details page for ICMS 
 Summary: Endless changes......Kill me pls...
 Author: LU Yi Chen
 Date: Nov 2013
  -->

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- ============================CSS link goes here============================ -->
	<!-- <link rel="stylesheet" href="css/globle.css"> -->
	<link rel="stylesheet" href="jquery-ui-1.10.3.flick/css/flick/jquery-ui-1.10.3.custom.css">
	<!-- Bootstrap -->
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" media="screen">
	<!-- Responsive -->
	<link href="css/bootstrap-responsive.css" rel="stylesheet">
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/buttons-min.css">
	<link rel="stylesheet" href="css/pure-skin-mine.css">	
	<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
	<!-- <link rel="stylesheet" href="css/modal.css"> -->
	<link rel="stylesheet" href="css/decoration.css">
	<link rel="stylesheet" href="css/responsive.css">
	<link rel="stylesheet" href="css/buttons.css">
	<link rel="stylesheet" href="js/DataTables/css/jquery.dataTables.css">
	
	<!-- ============================End of CSS links============================ -->

	<!-- ============================JS file goes here============================ -->
	<script src="jquery-ui-1.10.3.flick/js/jquery-1.9.1.js"></script>
	<script src="jquery-ui-1.10.3.flick/js/jquery-ui-1.10.3.custom.min.js"></script>
	<!-- Bootstrap -->
	<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
	<script src="js/bootstrap-tab.js"></script>
	<script src="js/jsResponsive.js"></script>
	<script src="js/jsButton.js"></script>
	<script src="js/AI1JavaScript.js"></script>
	<script src="js/autocomplete.js"></script>
	<script src="js/getURLParameter.js"></script>
	<script src="js/dataExchangeAjax.js"></script>

	<script src="js/DataTables/js/jquery.dataTables.js"></script>
	<script src="js/inboxAjax.js"></script>
	<script src="js/confirmationDialog.js"></script>

	<!-- jGrowl -->
	<link rel="stylesheet" href="js/jGrowl/jquery.jgrowl.css">
	<script src="js/jGrowl/jquery.jgrowl.js"></script>
	<!-- NProgress -->
	<link rel="stylesheet" href="js/nprogress/nprogress.css">
	<script src="js/nprogress/nprogress.js"></script>

	<link rel="stylesheet" href="css/progressBar.css">
	<script src+"js/jqProgressBar.min.js"></script>
	<script src="js/progressBar.js"></script>

	<script>
		$(document).ready(function() {
			$('div#replyPanel').hide();
			$('#replyPanel-agency').append(localStorage["loginType"]);
			$('#replyPanel-officer').append(localStorage["username"]);
		});
		$(function() {
		    //datepicker
		    $( ".datepicker" ).datepicker({
		    	showOn: "both",
		    	buttonImage: "images/icon_calendar.png",
		    	buttonImageOnly: true,
		    	firstDay: 1,
		    	dateFormat: "d-M-yy",
		    	defaultDate: 0
		    });

		});

		/* slider bar */
		$(function() {
			$( "#distanceSlider" ).slider({
				value:0,
				min: 0,
				max: 1000,
				step: 10,
				slide: function( event, ui ) {
					$( "#distance" ).val( ui.value + " m");
				}
			});
			$( "#distance" ).val($( "#distanceSlider" ).slider( "value" )+" m");

			//incident date slider
			$( "#incidentDateSlider" ).slider({
				value:0,
				min: 0,
				max: 30,
				step: 1,
				slide: function( event, ui ) {
					$( "#incidentDateTbx" ).val( ui.value + " Days");
				}
			});
			$( "#incidentDateTbx" ).val($( "#incidentDateSlider" ).slider( "value" )+" Days");



			
		});
	</script>
</head>
<body>
	<header class="row-fluid">
		<div class="row-fluid">
			<div class="span3 offset9">
				<img id="govLogo" src="images/gov-logo.png" alt="Singapore Government verified"></img>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span12">
				<img id="banner" src="" alt="Integrated Case Management System" class="span8" href="#">
			</div>
		</div>
		<div class="row-fluid">
			<nav class="navbar">
				<div class="navbar-inner">
					<ul class="nav nav-pills">
						<li><a href="inbox(1).html">Inbox</a></li>
						<li><a href="#">Reports</a></li>
						<li><a href="create-case(1).html" target="_new">New Case</a></li>

					</ul>
					<!-- START:login control -->
					<ul class="nav pull-right">
                      <li class="divider-vertical"></li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user fa-lg"></i>&nbsp;&nbsp;<span id="username">Litash</span>(<span id="loginType" style="font-weight:600;"></span>)&nbsp;&nbsp;<i class="fa fa-sort-asc"></i></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Account</a></li>
                          <li><a href="#">Change Password</a></li>
                          <li><a href="#">Update Profile Info</a></li>
                          <li class="divider"></li>
                          <li><a href="login.html" id="btnLogout">Log out</a></li>
                        </ul>
                      </li>
                    </ul>
                    <!-- END:login control -->
				</div>
			</nav>
		</div>
		<div class="row-fluid">
			<h1>
				<div class="span11">
					Case Details
				</div>
				<div class="span1" id="statusIcon">
					
				</div>
			</h1>
			<hr class="thickLine">
		</div>
	</header>
	<div class="container-fluid main">
		<div class="row-fluid">
			<div class="span6">
				<div class="row-fluid">
					<div class="span4">
						<label for="#caseIDTrunk">ID</label>
					</div>
					<div class="span8">
						<span id="caseIDTrunk"></span>
					</div>
					<div id="caseID" style="display:none;"></div>
				</div>
			</div>
			<div class="span6">
				<div class="row-fluid">
					<div class="span4">
						<label for="#caseStatus">Status</label>
					</div>
					<div class="span8">
						<span id="caseStatus"></span>
					</div>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#agencyCaseID">Agency Case ID</label>
				</div>
				<div class="span8">
					<span id="agencyCaseID">8523156165442164</span>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label>Incident Date</label>
				</div>
				<div class="span8"><span id="fbDate"></span></div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#recDate">Received Date</label>
				</div>
				<div class="span8"><span id="recDate"></span></div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#dueDate">Due Date</label>
				</div>
				<div class="span8"><span id="dueDate"></span></div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#closedDate">Closed Date</label>
				</div>
				<div class="span8"><span id="closedDate"></span></div>
			</div>
		</div>
		<hr class="slimLine">
		<div class="row-fluid">
			<div class="span2">
				<label for="#sbjTitle">Subject Title</label>
			</div>
			<div class="span10"><span id="sbjTitle" style="margin-left: -0.5%;"></span></div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#fbType">Feedback Type</label>
				</div>
				<div class="span8"><span id="fbType"></span></div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#channel">Channel</label>
				</div>
				<div class="span8"><span id="channel"></span></div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span2">
				<label for="#caseDesc">Description</label>
			</div>
			<div class="span9" id="caseDescDiv">
				<p id="caseDesc" class="bigTextblock">
				</p>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#agency">Agency</label>
				</div>
				<div class="span8">
					<span id="agency"></span>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#category">Category</label>
				</div>
				<div class="span8">
					<span id="category" class="autoCome"></span>
				</div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#subCate">Sub Category</label>
				</div>
				<div class="span8">
					<span id="subCate" class="autoCome"></span>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#uploadedImg">Uploaded Image</label>
				</div>
				<div class="span8"><img id="uploadedImg" src="" alt="Uploaded image"></div>
			</div>
			
			<div class="span6">
				<div class="row-fluid">
					<div class="span4">
						<label for="#address">Address</label>
					</div>
					<div class="span8">
						<p id="address"></p>
					</div>	
				</div>
				<div class="row-fluid">
					<div class="span4">
						<label for="#postal">Postal Code</label>
					</div>
					<div class="span8">
						<span id="postal"></span>
						<br/>
						<span class="clickable" title="Click to view address on map"><i class="fa fa-map-marker"></i>&nbsp;&nbsp;Map</span>
					</div>
					
				</div>
			</div>
		</div>
		<br/>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#lastUpdateAgency">Last Update Agency</label>
				</div>
				<div class="span8"><span id="lastUpdateAgency"></span></div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#lastAction">Last Update Action</label>
				</div>
				<div class="span8"><span id="lastAction"></span></div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label>Case Created Agency</label>
				</div>
				<div class="span8"><span id="caseCreatedAgency"></span></div>
			</div>
			<div class="span6">
				<div class="span4">
					<label>Case Created Date</label>
				</div>
				<div class="span8">
					<span id="caseCreatedDate"></span>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#lastUpdateDate">Last Update Date</label>
				</div>
				<div class="span8"><span id="lastUpdateDate"></span></div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="">Attachments</label>
				</div>
				<div class="span8">
					<div class="row-fluid">
						<table>
							<!-- <tr>
								<td class="fakeLinkText">12314145123341.pdf</td>
							</tr>
							<tr>
								<td class="fakeLinkText">1341324647.doc</td>
							</tr> -->
						</table>
					</div>
					<div class="row-fluid">
					
						<input type="file">
						<!-- <button type="button" class="pure-button pure-button-primary">Upload Attachment&nbsp;&nbsp;<i class="fa fa-paperclip"></i></button> -->
					</div>
				</div>
			</div>
		</div>
		<br/>
		<div class="row-fluid">
			<div class="span2">
				<label for="#closureDesc">Case Notes</label>
			</div>
			<div class="span10">
				<p id="closureDesc" class="bigTextblock"></p>
			</div>
		</div>
		<div class="rowfluid">
			<h2>Customer Information</h2>
			<hr class="slimLine">
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#custName">Customer Name</label>
				</div>
				<div class="span8">
					<span id="custName"></span>
				</div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#phone">Mobile Number</label>
				</div>
				<div class="span8">
					<span id="phone"></span>
				</div>
			</div>
		</div>
		<!-- <div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label>ID Type</label>
				</div>
				<div class="span8">
					<span>NRIC</span>
				</div>
			</div>
			<div class="span6">
				<div class="span4">
					<label>Home Number</label>
				</div>
				<div class="span8">
					<span></span>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#NRIC">ID Number</label>
				</div>
				<div class="span8"> -->
					<span id="NRIC" style="display:none;"></span>
				<!-- </div>
			</div>
			<div class="span6">
				<div class="span4">
					<label>Office Number</label>
				</div>
				<div class="span8">
					<span></span>
				</div>
			</div>
		</div> -->
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#email">Email</label>
				</div>
				<div class="span8">
					<span id="email"></span>
				</div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#mCustID">Mobile Customer ID</label>
				</div>
				<div class="span8">
					<span id="mCustID"></span>
				</div>
			</div>
		</div>
		
		<!-- <div class="row-fluid">
			<h2>Linked Cases</h2>
			<hr class="slimLine">
		</div>
		<div class="row-fluid">
			<div class="span10 offset1 jointInvolvedTable">
				<table id="detailInvolvedAgencyTable">
					<colgroup>
						<col span="1" style="width:30%;">
						<col span="1" style="width:30%">
						<col span="1" style="width:30%;">
						<col span="1" style="width:10%;">
					</colgroup>
					<thead>
						<tr>
							<th>Case ID</th>
							<th>Agency</th>
							<th>Relationship</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						
					</tbody>
				</table>
			</div>
		</div> -->
		<div id="acknowledgementDiv">
			<div class="row-fluid">
				<h2>Acknowledgement</h2>
				<hr class="slimLine">
			</div>
			<div class="row-fluid">
				<div class="span2">
					<label for="">Comments
						<span style="color:red;">*</span>(mandatory for reject)
					</label>
				</div>
				<div class="span10">
					<textarea id="rejectComments" class="bigTextarea"></textarea>
				</div>
			</div>
		</div>
		
		<!-- load case info to page elements when those elements are loaded to page -->
		<script>loadCase2Page()</script>

		<!--Child case part-->
		<!--div id="childCasesPart">
			<div class="row-fluid">
				<h2>Child Cases</h2>
				<hr class="slimLine">
			</div>
			<div class="row-fluid">
				<div id="childCaseTableWrap">
					<table id="childCaseTable" class="childTable">
						<thead>
							<tr>
								<th>Child Case ID</th>
								<th>Subject Title</th>
								<th>Category</th>
								<th>Case Status</th>
								<th>Routing Date</th>
								<th>Due Date</th>
								<th>Agency</th>
							</tr>
						</thead>
						<tbody>
							child cases are added in here
						</tbody>
					</table>
				</div>
			</div>
		</div-->

		<!-- joint agencies part-->
		<!--div id="jointAgencyPart">
			<div class="row-fluid">
				<h2 class="subTitle">Agencies Involved</h2>
				<hr class="slimLine">
			</div>
			<div class="row-fluid">
				<div id="jointAgencyTableWrap">
					<table id="jointAgencyTable" class="agencyTable">
						<thead>
							<tr>
								<th id="name" style="width: 40%;">Agency Name</th>
								<th id="lead" style="width: 20%;">Lead Agency</th>
								<th id="status" style="width: 40%;">Status</th>
							</tr>
						</thead>
						<tbody>
							child cases go here
						</tbody>
					</table>
				</div>
			</div>
		</div-->

		<!-- "More Options" "Edit" "Accept" buttons -->
		<div class="row-fluid" style="min-height: 20px;"></div>
		<div class="row-fluid">
			<div class="span6 offset6">
				<div id="btnAcceptDiv">
					<button id="btnAccept" type="submit" class="pure-button pure-button-success tailButton">Accept</button>
					<button id="btnReject" type="submit" class="pure-button pure-button-error tailButton">Reject</button>
				</div>
				<div id="btnEditDiv">
					<button id="btnEdit" type="submit" class="pure-button pure-button-primary tailButton" onclick="redirectEdit()">Edit&nbsp;&nbsp;<i class="fa fa-pencil-square-o"></i></button>
					<button id="btnReply" type="submit" class="pure-button pure-button-primary tailButton" >Response to Customer&nbsp;&nbsp;<i class="fa fa-mail-reply-all"></i></button>
				</div>
				<!--button id="btnMoreOptions" type="submit" class="pure-button pure-button-secondary tailButton">More Options&nbsp;&nbsp;<i class="fa fa-chevron-down"></i></button-->
			</div>
		</div>

		<!-- ********** START: Reply to customer panels ********** -->
		<div class="row-fluid" id="replyPanel">
			<h2>Response to Customer</h2>
			<hr class="slimLine">
			<div class="row-fluid">
				<div class="span6">
					<div class="span4">
						<label for="#replyPanel-channel">Channel</label>
					</div>
					<div class="span8">
						<select name="replyPanel-channel" id="replyPanel-channel">
							<option value="Mobile App">Mobile App</option>
							<option value="Email">Email</option>
							<option value="Phone call">Phone call</option>
							<option value="Face to face">Face to face</option>
						</select>
					</div>
				</div>
				<div class="span6">
					<div class="span4">
						<label for="#replyPanel-datetime">Date/Time</label>
					</div>
					<div class="span8">
						<span id="replyPanel-datetime"></span>
					</div>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span6">
					<div class="span4">
						<label for="#replyPanel-agency">Agency</label>
					</div>
					<div class="span8">
						<span id="replyPanel-agency"></span>
					</div>
				</div>
				<div class="span6">
					<div class="span4">
						<label for="#replyPanel-officer">Officer</label>
					</div>
					<div class="span8">
						<span id="replyPanel-officer"></span>
					</div>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span2">
					<label for="#replyPanel-caseReply">Enter Response</label>
				</div>
				<div class="span10">
					<textarea class="bigTextarea" name="caseResponse" id="replyPanel-caseResponse" placeholder="This is your response for this case"></textarea>
				</div>
			</div>
			<!-- <div class="row-fluid">
				<div class="span2">
					<label for="#replyPanel-custFeedback">Feedback from Customer</label>
				</div>
				<div class="span10">
					<textarea class="bigTextarea" name="custFeedback" id="replyPanel-custFeedback" placeholder="Please enter customer's feedback for your response"></textarea>
				</div>
			</div> -->
			<div class="row-fluid">
				<div class="span2 offset2">
					<label style="cursor:pointer;"><input type="checkbox" name="idFinal" id="replyPanel-idFinal" value="1">Final Response</input></label>
				</div>
				
				<!-- <div class="span4 offset2">
					<div class="row-fluid">
						<div class="span6">
							<label for="#replyPanel-ddlInformedCustomer" style="float:left;">Informed Customer?</label>
						</div>
						<div class="span6">
							<div class="row-fluid">
								<div class="span6">
									<label style="cursor:pointer;"><input type="radio" name="isInformed" id="replyPanel-cbxInformedY" value="1">Yes</input></label>
								</div>
								<div class="span6">
									<label style="cursor:pointer;"><input type="radio" name="isInformed" id="replyPanel-cbxInformedN" value="0">No</input></label>
								</div>
							</div>
						</div>
					</div>
				</div> -->
			</div>
			<div class="row-fluid" id="replyPanel-remarksDiv">
				<div class="row-fluid">
					<div class="span2"><label for="#replyPanel-replyRemarks">Remarks (Internal)</label></div>
					<div class="span10">
						<textarea class="bigTextarea" name="replyRemarks" id="replyPanel-replyRemarks" placeholder="These remarks will not be visible to the customer"></textarea>
					</div>
				</div>
			</div>
			<div class="row-fluid" id="replyPanel-buttonsDiv">
				<button id="replyPanel-btnSubmitReply" type="button" class="pure-button pure-button-primary tailButton">Send Response</button>
			</div>
			<div id="addedResponseDiv">
				<h2>Added Response</h2>
				<hr class="slimLine">
				
				<div class="row-fluid jointInvolvedTable jointInvolvedTable-cellborder">
					<table id="addResponseTable">
						<colgroup>
						<col span="1" style="width:20%">
						<col span="1" style="width:10%">
						<col span="1" style="width:10%">
						<col span="1" style="width:20%">
						<col span="1" style="width:30%">
						<col span="1" style="width:10%">
						</colgroup>
						<thead>
							<tr>
								<th>Date/Time</th>
								<th>Channel</th>
								<th>Agency</th>
								<th>Officer</th>
								<th>Response</th>
								<th>Is Final?</th>
							</tr>
						</thead>
						<tbody>
							
						</tbody>
					</table>
				</div>
				<br/>
				<br/>	
			</div>
			
		</div>
		<!-- ********** END: Reply to customer panels ********** -->

		<!-- ********** START: More Option panels ********** -->
		<div class="row-fluid">
			<h2 class="collapsible" style="cursor:pointer;">More Options&nbsp;&nbsp;<i class="fa fa-chevron-down"></i></h2>
			<hr class="slimLine">
		</div>
		<div class="row-fluid" id="optionsPanel">
			<div class="tabbable row-fluid" id="panelHeader">
				<ul id="panelTabs" class="nav nav-tabs" data-tabs="tabs"> 
					<!--li class="active"><a href="#panelReply" data-toggle="tab">Reply to customer</a></li--> 
					<li class="active"><a href="#panelReroute" data-toggle="tab">Reroute</a></li> 
					<li><a href="#panelLink" data-toggle="tab">Link</a></li> 
					<li><a href="#panelMulti" data-toggle="tab">Joint</a></li> 
					<!--li><a href="#panelJoint" data-toggle="tab">Joint Resolution</a></li-->
					<!-- <li><a href="#panelReturn" data-toggle="tab">Return to sender</a></li>  -->
				</ul> 
			</div>
			
			<div class="tab-content row-fluid" id="panelArea">
				<!-- reply tab -->
				<!--div class="tab-pane fade active in" id="panelReply">
					<div class="row-fluid">
						<div class="span2">
							<label for="#panelReply-caseReply">Enter Reply</label>
						</div>
						<div class="span10">
							<textarea class="bigTextarea" name="caseReply" id="panelReply-caseReply" placeholder="This is the reply seen by the customer"></textarea>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span2 offset2">
							<label style="cursor:pointer;"><input type="radio" name="replyType" id="panelReply-cbxInterim" value="0">Interim Reply</input></label>
						</div>
						<div class="span2">
							<label style="cursor:pointer;"><input type="radio" name="replyType" id="panelReply-cbxInterim" value="1">Final Reply</input></label>
						</div>
						<div class="span5 offset1">
							<label for="#panelReply-ddlInformedCustomer" style="float:left;">Informed Customer?</label>
							<select name="informedCustomer" id="panelReply-ddlInformedCustomer" style="float:right; width:50%;">
								<option value="yes">YES</option>
								<option value="No">NO</option>
							</select>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span2"><label for="#panelReply-replyRemarks">Remarks (Internal)</label></div>
						<div class="span10">
							<textarea class="bigTextarea" name="replyRemarks" id="panelReply-replyRemarks" placeholder="These remarks will not be visible to the customer"></textarea>
						</div>
					</div>
					<button id="panelReply-btnSubmitReply" type="button" class="pure-button pure-button-primary tailButton" onclick="submitReply()">Submit</button>
				</div-->
				<!-- reroute tab -->
				<div class="tab-pane fade active in" id="panelReroute">
					<div class="row-fluid">
						
						
						<!-- START: Text Analytic Widget (button and bars) -->
						<div class="span6">
							<div class="row-fluid">
								<div class="span4">
									<label>Suggested Agency</label>
								</div>
								<div class="span8">
								
									<button type="submit" class="pure-button pure-button-primary" id="btnAnalyzeDesc">Analyze Description&nbsp;<i id="icon-loading" class="fa fa-spinner fa-spin"></i></button>
								</div>
							</div>
							<div id="progressBarsDiv" class="row-fluid" style="margin-left:1%;margin-bottom:1%;">	
								<div class="span4">
									<span>Probability:</span>
								</div>
								<div class="span8">
									<div class="row-fluid">
										<div class="span3">
											<span>LTA</span>
										</div>
										<div class="span9">
											<div class="progressBar" id="progressBar1">
												<div></div>
											</div>
										</div>
									</div>
									<div class="row-fluid">
										<div class="span3">
											<span>NEA</span>
										</div>
										<div class="span9">
											<div class="progressBar" id="progressBar2">
												<div></div>
											</div>	
										</div>
									</div>
									<div class="row-fluid">
										<div class="span3">
											<span>PUB</span>
										</div>
										<div class="span9">
											<div class="progressBar" id="progressBar3">
												<div></div>
											</div>
										</div>
									</div>
						<!-- <div class="row-fluid">
						<p style="color: #666; font-family: Calibri; font-size: 1.2em; text-align: left; margin:0px;">This case most likely belongs to: <span id="recomAgency" style="color:#0D8EFC;font-weight:600"></span></p> -->
								</div>
							</div>
						</div>	
						<!-- END: Text Analytic Widget (button and bars) -->
					</div>
					<br/>




					<!-- START: autocomplete module -->
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelReroute-autoComp">Category Search</label>
							</div>
							<div class="span8">	
								<!-- input for Category keywords. MUST USE 'autoComp' because the id in js is that -->
								<input type="text" class="autoComp tbx100" id="panelReroute-autoComp" placeholder="Enter keyword for categories...">
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#panelReroute-autoComp-category">Category</label>
							</div>
							<div class="span8">
								<span id="panelReroute-autoComp-category" class="autoComp-category"></span>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelReroute-autoComp-agency">Route to</label>
							</div>
							<div class="span8">
								<select id="panelReroute-autoComp-agency" class="autoComp-agency">
									<option value="0">--Choose Agency--</option>
									<option value="AVA">AVA</option>
									<option value="HDB">HDB </option>
									<option value="LTA">LTA</option>
									<option value="NEA">NEA</option>
									<option value="NPARKS">NPARKS</option>
									<option value="PUB">PUB</option>
									<option value="SPF">SPF</option>
								</select>
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#panelReroute-autoComp-subCate">Sub Category</label>
							</div>
							<div class="span8">
								<span id="panelReroute-autoComp-subCate" class="autoComp-subCate"></span>			
							</div>
						</div>
					</div>
					<!-- END: autocomplete module -->
					<div class="row-fluid">
						<div class="span2"><label for="#panelReroute-Remarks">Remarks</label></div>
						<div class="span10" style="margin">
							<textarea name="rerouteRemarks" id="panelReroute-Remarks" class="bigTextarea"></textarea>
						</div>
					</div>
					<div class="row-fluid">
						<button type="submit" class="pure-button pure-button-primary tailButton">Send</button>
					</div>
				</div>
				<!-- link cases tab -->
				<div class="tab-pane fade" id="panelLink">
					<div class="row-fluid">
						<div class="span2"><label for="#panelLink-Search">Search Cases</label></div>
						<div class="span10"><input type="text" id="panelLink-Search" placeholder="E.g. Subject Title, Description, Category, Customer, Email" class="tbx100"></div>
					</div>
					<!--div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#searchCustName">Customer Name</label>
							</div>
							<div class="span8">
								<input type="text" id="searchCustName">
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#searchEmail">Email</label>
							</div>
							<div class="span8">
								<input type="text" id="searchEmail">
							</div>
						</div>
					</div-->
					<hr>
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelLink-CaseID">Case ID</label>
							</div>
							<div class="span8">
								<input type="text" id="panelLink-CaseID">
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="">Incident Date</label>
							</div>
							<div class="span7">
								<div class="row-fluid">
									<div class="span8">
										<div id="incidentDateSlider" style="margin-top: 5px;"></div>
									</div>
									<div class="span2">Within</div>
									<div class="span2">
										<input type="text" id="incidentDateTbx" style="width:50px;height: 15px;" />
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelLink-Agency">Agency</label>
							</div>
							<div class="span8">
								<select name="panelLink-Agency" id="linkAgency">
									<option value="Undefined">--Choose Agency--</option>
									<option value="AVA">AVA</option>
									<option value="NEA">NEA</option>
									<option value="LTA">LTA</option>
									<option value="NPARKS">NPARKS</option>
									<option value="SPF">SPF</option>
									<option value="PUB">PUB</option>
									<option value="PSD">PSD</option>
								</select>
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#distance">Distance range:</label>
							</div>
							<div class="span7">
								<div class="row-fluid">
									<div class="span8">
										<div id="distanceSlider" style="margin-top: 5px;"></div>
									</div>
									<div class="span2">Within</div>
									<div class="span2">
										<input type="text" id="distance" style="width:50px;height: 15px;" />
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span6 offset6">
							<div class="span8 offset4">
								<button type="submit" class="pure-button pure-button-primary tailButton">Search</button>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<h3></h3>
						<hr class="slimLine">
					</div>
					<div class="row-fluid inboxTable">
						<table cellpadding="0" cellspacing="0" border="0" class="display dataTable" id="linkCaseTable" width="100%" aria-describedby="" style="width: 100%;">
							<colgroup>
							<col span="1" style="width: 2%;">
							<col span="1" style="width: 10%;">
							<col span="1" style="width: 19%;">
							<col span="1" style="width: 10%;">
							<col span="1" style="width: 15%;">
							<col span="1" style="width: 17%;">
							<col span="1" style="width: 17%;">
							<col span="1" style="width: 10%;">
							</colgroup>
							<thead>
								<tr>
									<th><input type="checkbox" id="cbxAll"></input></th>
									<th>Case ID</th>
									<th>Subject Title</th>
									<th>Category</th>
									<th>Case Status</th>
									<th>Incident Date</th>
									<th>Due Date</th>
									<th>Agency</th>
									<th>Distance</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td><input type="checkbox"></input></td>
									<td>201312261121</td>
									<td>Water pipe burst</td>
									<td>Public Infrastructure</td>
									<td>Closed</td>
									<td>30-Nov-2013</td>
									<td>03-Dec-2013</td>
									<td>PUB</td>
									<td>30 m</td>
								</tr>
								<tr>
									<td><input type="checkbox"></input></td>
									<td>201312261025</td>
									<td>Ponding at pavement</td>
									<td>Public Infrastructure</td>
									<td>Closed</td>
									<td>25-Oct-2013</td>
									<td>30-Oct-2013</td>
									<td>NPARKS</td>
									<td>10 m</td>
								</tr>
							</tbody>
						</table>
					</div>
					<hr>
					<div class="row-fluid">
						<div class="span6 offset6">
							<div class="row-fluid">
								<div class="span4 offset2">
									<label style="cursor:pointer;"><input type="radio" name="linkType" value="Duplicated">Duplicated case</input></label>
								</div>
								<div class="span4">
									<label style="cursor:pointer;"><input type="radio" name="linkType" value="Related">Related case</input></label>
								</div>
								<div class="span2">
									<button type="submit" class="pure-button pure-button-primary tailButton" id="btnLinkCase">Link</button>
								</div>
							</div>
						</div>
					</div>				
				</div>
				<!-- Joint panel (pre-named as "multi issue") -->
				<div class="tab-pane fade" id="panelMulti">
					<div class="row-fluid">
						<div class="span2">
							<label for="#panelMulti-SubjectTitle">Child Subject Title</label>
						</div>
						<div class="span10">
							<input type="text" id="panelMulti-SubjectTitle" class="tbx100">
						</div>
					</div>
					<div class="row-fluid">
						<div class="span2">
							<label for="#panelMulti-Issue">Child Case Description</label>
						</div>
							<div class="span10">
							<textarea name="issueDescription" id="panelMulti-Issue" class="bigTextarea"></textarea>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelJoint-autoComp-agency">Target Agency</label>
							</div>
							<div class="span8">
								<select id="panelJoint-autoComp-agency" class="autoComp-agency">
									<option value="Undefined">--Choose Agency--</option>
									<option value="AVA">AVA</option>
									<option value="HDB">HDB </option>
									<option value="LTA">LTA</option>
									<option value="NEA">NEA</option>
									<option value="NPARKS">NPARKS</option>
									<option value="PUB">PUB</option>
									<option value="SPF">SPF</option>
								</select>
							</div>
						</div>
						<div class="span6">
							<label style="cursor:pointer;"><input type="checkbox" id="isLeadAgency">Lead Agency</label>
						</div>
					</div>

					
					<!-- <div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelMulti-Address">Address</label>
							</div>
							<div class="span8">
								<textarea name="address" id="panelMulti-Address" class="tbxAddress"></textarea>
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#panelMulti-Postal">Postal Code</label>
							</div>
							<div class="span8">
								<input type="text" id="panelMulti-Postal" placeholder="6 digits postal code">
							</div>
						</div>
					</div> -->

					<div class="row-fluid">
						<button type="submit" id="btnAddAgency" class="pure-button pure-button-primary tailButton">+ Add Agency</button>
					</div>
					<div id="addedAgenciesWrapDiv">
						<div class="row-fluid">
							<h2>Added Agencies</h2>
							<hr class="slimLine">
						</div>
						<div class="row-fluid">
							<div class="span10 offset1 jointInvolvedTable">
								<table id="addedAgenciesTable">
									<!-- <colgroup>
									<col span="1" style="width:30%;">
									<col span="1" style="width:20%;">
									<col span="1" style="width:20%;">
									<col span="1" style="width:15%;">
									<col span="1" style="width:15%;">
									</colgroup> -->
									<thead>
										<tr>
											<th>Subject Title</th>
											<!-- <th>Category</th>
											<th>Sub-Category</th> -->
											<th>Agency</th>
											<th></th>
										</tr>
									</thead>
									<tbody>
										
									</tbody>
								</table>
							</div>
						</div>
						<br/>
						<br/>
						<div class="row-fluid">
							<button type="button" id="btnSendJointAgency" class="pure-button pure-button-primary tailButton">Send</button>
						</div>
					</div>
					<div id="sendConfirmationDialog" title="Confirmation">
						<p><i class="fa fa-question-circle fa-lg"></i>&nbsp;Confirm sending to these agencies?</p>
					</div>
				</div>

				<!-- joint resolution panel -->
				<!--div class="tab-pane fade" id="panelJoint">
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelJoint-category">Category</label>
							</div>
							<div class="span8">
								<select name="Category" id="panelJoint-category">
									<option value="Animal">Animal</option>
									<option value="Air polution">Air polution</option>
									<option value="BCA">BCA</option>
									<option value="Bicycle">Bicycle</option>
									<option value="danger">danger</option>
								</select>
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#panelJoint-sub-category">Sub Category</label>
							</div>
							<div class="span8">
								<select name="Category" id="panelJoint-sub-category">
									<option value="Animal">Animal</option>
									<option value="Air polution">Air polution</option>
									<option value="BCA">BCA</option>
									<option value="Bicycle">Bicycle</option>
									<option value="danger">danger</option>
								</select>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span2">
							<label for="#panelJoint-remarks">Remarks</label>
						</div>
						<div class="span10">
							<textarea name="remarks" id="panelJoint-remarks" class="bigTextarea"></textarea>
						</div>
					</div>
					<hr class="slimLine">
					<div class="row-fluid">
						<div class="span6">
							<div class="row-fluid">
								<div class="span4">
									<label for="#panelJoint-TargetAgency">Target Agency</label>
								</div>
								<div class="span8">
									<select name="tergetAgency" id="panelJoint-TargetAgency">
										<option value="NEA">NEA</option>
										<option value="Undefined">Choose Agency</option>
										<option value="AVA">AVA</option>
										<option value="LTA">LTA</option>
										<option value="NPARKS">NPARKS</option>
										<option value="SPF">SPF</option>
										<option value="PUB">PUB</option>
										<option value="PSD">PSD</option>
									</select>
								</div>
							</div>
							<div class="row-fluid">
								<div class="span8 offset4">
									<label style="cursor:pointer;"><input type="checkbox">Lead Agency</label>
								</div>
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#panelJoint-Agency-remarks">Remarks</label>
							</div>
							<div class="span8">
								<textarea name="agencyRemarks" id="panelJoint-Agency-remarks" class="tbxAddress"></textarea>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<button type="submit" class="pure-button pure-button-primary tailButton">+ Add Agency</button>
					</div>
				</div-->


				<!-- return to sender panel -->
				<div class="tab-pane fade" id="panelReturn">
					<div class="row-fluid">
						<div class="span2">
							<label for="#panelReroute-Reason">Returning Reason</label>
						</div>
						<div class="span10">
							<textarea name="returningReason" id="panelReroute-Reason" class="bigTextarea"></textarea>
						</div>
					</div>
					<div class="row-fluid">
						<button type="submit" class="pure-button pure-button-primary tailButton">Send</button>
					</div>
				</div>
			</div><!-- end of inner tabs tag -->
		</div><!-- end of tabs nav tag -->
		
		<!-- *********** END: More Option panels ***********  -->

		

	</div>

	<footer class="row-fluid">
		<span id="copyright">&copy; Copyright 2013, All rights Reserved.</span>
		<span id="PSTCD">Privacy Statement | Terms &amp; Conditions | Disclaimer</span>
	</footer>

	<!-- dialogs -->
	<div id="btnConfirmationDialogAccept" class="btnResponseARConfirmationDialog" title="Confirmation">
		<p><i class="fa fa-question-circle fa-lg"></i>&nbsp;Confirm accepting this case?</p>
	</div>

	<div id="btnConfirmationDialogReject" class="btnResponseARConfirmationDialog" title="Confirmation">
		<p><i class="fa fa-question-circle fa-lg"></i>&nbsp;Confirm rejecting this case?</p>
	</div>
	
	<div title="Alert" id="emptyCommentsDialog">
		<p><i class="fa fa-exclamation-triangle fa-lg"></i>&nbsp;&nbsp;Please enter comments for rejection reason!</p>
	</div>

</body>
</html>
